<template>
<!-- 搜索弹出框 -->
  <div class="search_popup">
    <form action="/">
      <van-search
        v-model="searchVal"
        show-action
        :placeholder="placeVal"
        @input="onInput"
        @search="onSearch"
        @cancel="onCancel"
      />
      <!-- 请求搜索数据的组件 -->
      <HoistoryHot
        v-if="blockShow == 1"
        :hoistoryListData="hoistoryListData"
        :hotListData="hotListData"
        @onSearch="sonSearch"
      />
      <!-- 请求搜索提示的组件 -->
      <SearchTipsList
        v-if="blockShow == 2"
        :searchTipsListData="searchTipsListData"
        @onSearch="sonSearch"
      />
      <!-- 请求搜索产品数据 -->
      <SearchProducts
        v-if="blockShow == 3"
        :searchgoodsListData="searchgoodsListData"
        :filterCategory="filterCategory"
        @changeCategory="changeCategory"
        @changePrice="changePrice"
      />
    </form>
  </div>
</template>

<script>
import HoistoryHot from "@/components/HoistoryHot";
import SearchTipsList from "@/components/SearchTipsList";
import SearchProducts from "@/components/SearchProducts";
import {
  GetSearchData,
  GetSearchTipsData,
  GetSearchgoodsData,
} from "@/request/api";
export default {
  data() {
    return {
      // 获取文本框的值
      searchVal: "",
      placeVal: "请输入关键词",
      // 当blockShow的值是哪个就切换哪个组件
      blockShow: 1,
      hoistoryListData: [],
      hotListData: [],
      searchTipsListData: [],
      searchgoodsListData: [],
      filterCategory: [],
      // order 排序   sort以什么排序    categoryId分类id
      order: "desc",
      sort: "id",
      categoryId: "0",
    };
  },
  created() {
    GetSearchData().then((res) => {
      // console.log(res.data);
      this.placeVal = res.data.defaultKeyword.keyword;
      this.hoistoryListData = res.data.historyKeywordList;
      this.hotListData = res.data.hotKeywordList;
    });
  },
  components: {
    HoistoryHot,
    SearchTipsList,
    SearchProducts,
  },
  methods: {
    sonSearch(val){
      this.searchVal=val
      this.onSearch(val)
    },
    // 更改变量的值，发送请求
    changePrice(val) {
      this.order = val;
      this.sort = "price";
      this.onSearch(this.searchVal);
    },
    changeCategory(val) {
      // 接收子组件传过来的值，修改categoryId，发送请求
      this.categoryId = val;
      // 发送请求，获取关键字
      this.onSearch(this.searchVal);
    },

    onInput(val) {
      // 用户输入的时候，就执行这里的代码
      // 用户输入的时候，就展示第二个页面
      this.blockShow = 2;
      // 发送请求，获取搜索提示的列表数据
      GetSearchTipsData(val).then((res) => {
        // console.log(res);
        this.searchTipsListData = res.data;
      });
    },
    onSearch(val) {
      // 用户按回车的时候，执行这里的代码
      this.blockShow = 3;
      // console.log("onSearch", val);
      GetSearchgoodsData({
        // 用户搜索的关键字
        keyword: val,
        order: this.order,
        sort: this.sort,
        categoryId: this.categoryId,
      }).then((res) => {
        console.log(res);

        this.searchgoodsListData = res.data.data;
        // 将SearchProducts中的下拉框中的数据的键名 text 更改为 name ，value 改成 id。
        this.filterCategory = JSON.parse(
          JSON.stringify(res.data.filterCategory)
            .replace(/name/g, "text")
            .replace(/id/g, "value")
        );
        // this.filterCategory=res.data.filterCategory
      });
    },
    onCancel() {
      // 点击取消按钮时触发
      // console.log("onCancel");
      // 返回到上个页面
      this.$router.go(-1);
    },
  },
};
</script>
 
<style lang = "less" scoped>
.search_popup {
  width: 100%;
  height: 100%;
  /* position: absolute; */
  /* overflow: hidden; */
  position: fixed;
  overflow: scroll;
  /* left: 0; */
  top: 0;
  background-color: rgb(243, 197, 204);
  z-index: 99;
}
</style>